<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <link rel="stylesheet" href="./3.css">
</head>
<body>
<div id="app">
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>记事本</h1>
            <input
                    id="todo-input"
                    autofocus="autofocus"
                    autocomplete="off"
                    placeholder="请输入任务"
                    class="new-todo"
            />
        </header>
        <!-- 列表区域 -->
        <section class="main" id="todo-main">
            <ul id="todo-list" class="todo-list"></ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer" id="todo-footer">
        <span class="todo-count">
          <strong id="unfinished-count">0</strong>项未完成
        </span>
            <button class="clear-completed" id="clear-all">
                清空全部
            </button>
        </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
        <p>
            <a href="https://gitee.com/idauni" target="_blank">
                <button class="blog-button">GIT</button>
            </a>
        </p>
    </footer>
</div>

<script src="./3.js"></script>
</body>
</html>